<!--  -->
<template>
  <div class="content-nav">
    <div class="toggle" @click="setSidebarWidth(!getSystemConfig.isCollapse)">
      <i class="fa fa-bars"></i>
    </div>
    <div class="page-tabs">
      <router-link to="/dashboard">首页</router-link>
      <!-- <router-link to="/dashboard/goods/list" exact>
        商品管理
        <i class="fa fa-times-circle"></i>
      </router-link> -->
    </div>
    <!-- <div class="navbar-right">
      <a href=""><i class="fa fa-refresh"></i></a>
    </div> -->
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
    };
  },
  computed: {
    ...mapGetters("system", ["getSystemConfig", "getRoutes"]),
  },
  methods: {
    ...mapMutations("system", ["setSidebarWidth"]),
  },
};
</script>

<style scoped lang="less">
.content-nav {
  height: 42px;
  line-height: 42px;
  border-bottom: solid 2px #2f4050;
  position: fixed;
  top: 0;
  z-index: 66;
  width: 100%;
  background: #fafafa;
  display: flex;
  .toggle {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-right: solid 1px #eee;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    &:hover {
      background-color: #f2f2f2;
      color: #777;
    }
  }
  .page-tabs {
    a {
      display: block;
      height: 40px;
      float: left;
      border-right: solid 1px #eee;
      padding: 0 15px;
      color: #999;
      background: #fafafa;
      font-size: 12px;
      &:hover {
        background-color: #f2f2f2;
        color: #777;
      }
    }
    a.active {
      background: #2f4050;
      color: #fff;
    }
    a.exact-active {
      background: #2f4050;
      color: #fff;
    }
  }
  .navbar-right {
    position: absolute;
    right: 100px;
    display: flex;
    a {
      min-width: 40px;
      height: 40px;
      line-height: 40px;
      // background: ;
    }
  }
}
</style>
